<!--  -->
<template>
  <div class="cart-info-item">
      <div class="info-top">
          <i class="icon"></i>
          <div class="info-name">
              {{cart_info.name}}
              <div class="info-go"></div>
          </div>
          <div class="info-quan">领券</div>
      </div>
      <div class="info-center">
          <div :class="{checked:isChecked}" class="info-check" @click="checkClick">
              <img src="~assets/img/cart/tick.svg" alt="">
          </div>
          <div class="info-img"><img :src="cart_info.image" alt=""></div>
          <div class="info-right">
                <p class="p-title">{{cart_info.title}}</p>
                <p class="p-desc">{{cart_info.desc}}</p>
                <div class="info-price">￥{{cart_info.price}}</div>
                <div class="info-count">
                    <div class="sub" @click="subClick">-</div>
                    <div class="count-num">{{cart_info.count}}</div>
                    <div class="add" @click="addClick">+</div>
                </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  methods:{
      checkClick() {
          this.cart_info.checked = !this.cart_info.checked
      },
      subClick() {
          if(this.cart_info.count <= 1) {
          }else {
              this.cart_info.count--;
          }
      },
      addClick() {
          this.cart_info.count++;
      }
  },
  props:{
      cart_info:{
          type:Array,
          default() {
              return []
          }
      }
  },
  computed:{
      isChecked() {
          return this.cart_info.checked
      }
  }
}
</script>

<style  scoped>
    .cart-info-item{
        background-color: #fff;
        border-radius: 15px;
        padding: 15px 5px 15px 10px;
        margin: 0 15px 15px;
    }
    .info-top{
        position: relative;
        margin-left: 30px;
        font-size: 14px;
        line-height: 22px;
    }
    .icon {
        display: block;
        width: 22px;
        height: 22px;
        margin-bottom: 2px;
        background: url('~assets/img/detail/detail_bottom.png') 0 0/100%;
        background-position: 0 -97px;
    }
    .info-name {
        position: absolute;
        top: 2px;
        left: 30px;
        color: #333;
    }
    .info-go{
        position: absolute;
        top: 5px;
        right: -10px;
        width: 8px;
        height: 8px;
        border-top: 2px solid #aaa;
        border-right: 2px solid #aaa;
        transform: rotate(45deg);
    }
    .info-quan{
        position: absolute;
        right: 5px;
        top: 2px;
        color: #aaa;
    }
    .info-center{
        position: relative;
        margin:20px 10px 10px 30px;
    }
    .info-check {
        position: absolute;
        top: 35px;
        left: -30px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 1px solid tomato;
    }
    .info-check img {
        width: 100%;
    }
    .checked {
        background-color: tomato;
    }
    .info-img{
        width: 75px;
        height: 100px;
        border-radius: 10px;
        overflow: hidden;
    }
    .info-img img {
        width: 100%;
    }
    .info-right{
        position: absolute;
        top: 0;
        left: 95px;
        right: 0;
    }
    .info-right p {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    .p-title{
        font-size: 16px;
        color: #333;
    }
    .p-desc {
        margin-top: 15px;
        font-size: 13px;
        color: #777;
    }
    .info-price{
        margin-top: 25px;
        color: tomato;
    }
    .info-count {
        display: flex;
        position: absolute;
        top: 77px;
        right: 0;
        text-align: center;
    }
    .sub {
        width: 23px;
        height: 23px;
        border: 1px solid #ccc;
        border-radius: 3px 0 0 3px;

    }
    .add {
        width: 23px;
        height: 23px;
        border: 1px solid #ccc;
        border-radius: 0 3px 3px 0;
    }
    .count-num {
        width: 35px;
        height: 23px;
        line-height: 22px;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }
</style>
